<template>
  <div class="box">
    <div class="title">
      <div class="title_left" v-if="topFilter"></div>
      <div class="title_right" v-if="topFilter">{{ topFilter }}</div>
    </div>
    <div class="filterCriteria_type_box">
      <div
        class="filterCriteria_type"
        @click="headClick(1)"
        :class="headType == 1 ? 'filterCriteria_type_true' : ''"
      >
        <div>
          {{ condition.condition1 ? condition.condition1.name : "当前位置" }}
        </div>
        <div class="filterCriteria_type_icon">
          <img src="~img/lookAround/dropDownIcon.png" alt="" />
        </div>
      </div>
      <div
        class="filterCriteria_type type2"
        @click="headClick(2)"
        :class="headType == 2 ? 'filterCriteria_type_true' : ''"
      >
        <div>
          {{ condition.condition2 ? condition.condition2.name : "智能排序" }}
        </div>
        <div class="filterCriteria_type_icon">
          <img src="~img/lookAround/dropDownIcon.png" alt="" />
        </div>
      </div>
      <div
        class="filterCriteria_type type2"
        @click="headClick(3)"
        :class="headType == 3 ? 'filterCriteria_type_true' : ''"
      >
        <div class="more_icon">
          <img src="~img/lookAround/lookMoreTrue.png" alt="" />
        </div>
        <div>
          {{
            condition.condition3
              ? condition.condition3
              : condition.condition4
              ? condition.condition4.name
              : "发现更多"
          }}
        </div>
        <div class="filterCriteria_type_icon">
          <img src="~img/lookAround/dropDownIcon.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 当前位置 -->
    <div class="discover_more" v-show="headType == 1">
      <div
        class="distance"
        v-for="(item, index) in sortList1"
        :key="index"
        @click="distanceClick(item)"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>
    <!-- 智能排序 -->
    <div class="discover_more" v-show="headType == 2">
      <div
        class="distance"
        v-for="(item, index) in sortList2"
        :key="index"
        @click="intelligenceClick(item)"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>
    <!-- 发现更多 -->
    <div class="discover_more" v-show="headType == 3">
      <div class="xzqy_title">行政区域</div>
      <div class="xzqy_box">
        <van-tabs
          :swipeable="true"
          line-width="0px"
          @click="admClick"
          v-model="active"
        >
          <van-tab
            v-for="(item, index) in sortList3"
            :title="item.region"
            :name="item.region"
            :key="index"
          ></van-tab>
        </van-tabs>
      </div>
      <div class="xzqy_title2">产业园区</div>
      <div class="parkList">
        <div class="parkList_left">
          <div
            class="parkList_left_div"
            @click="leftPark(item)"
            :class="item.clickTrue ? 'parkList_left_div1' : ''"
            v-for="(item, index) in sortList3"
            :key="index"
          >
            {{ item.region }}
          </div>
        </div>
        <div class="parkList_right">
          <div
            class="parkList_left_div"
            v-for="(item, index) in parkLisRightt"
            :key="index"
            @click="parkClick(item)"
          >
            <span> {{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { queryIndustrialParks } from "@/interfaces/lookAround/index.js";
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      topFilter: "",
      swipeItem: "",
      headType: 1,
      leftType: "",
      sortList1: [
        { name: "500m", code: "0.5" },
        { name: "1km", code: "1.0" },
        { name: "2km", code: "2.0" },
        { name: "3km", code: "3.0" },
      ],
      sortList2: [
        {
          sortColumn: "distance",
          sortRule: "asc",
          name: "距离由近及远",
          key: "sort1",
        },
        {
          sortColumn: "distance",
          sortRule: "desc",
          name: "距离由远及近",
          key: "sort2",
        },
        {
          sortColumn: "creditScore",
          sortRule: "desc",
          name: "评分从高到低",
          key: "sort3",
        },
        {
          sortColumn: "creditScore",
          sortRule: "asc",
          name: "评分从低到高",
          key: "sort4",
        },
        {
          sortColumn: "esdate",
          sortRule: "asc",
          name: "成立日期由远及近",
          key: "sort5",
        },
        {
          sortColumn: "esdate",
          sortRule: "desc",
          name: "成立日期由近及远",
          key: "sort6",
        },
      ],
      sortList3: [],
      parkLisRightt: [],
      type: "",
      condition: {
        condition1: "",
        condition2: "",
        condition3: "",
        condition4: "",
      },
    };
  },
  computed: {
    active: {
      get() {
        console.log(this.condition, "22");
        // return this.condition.condition3;
      },
      set() {},
    },
  },
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {
    this.getSearchMore();
    console.log(this.$route.query, "路由信息");
    this.condition = this.$route.query.condition; //筛选参数
    this.swipeItem = this.$route.query.swipeItem; //选中的类型标签
    this.topFilter = this.$route.query.topFilter //选中的标签名字返现
      ? this.$route.query.topFilter
      : "";
    this.headClick(this.$route.query.type); //根据传过来的参数默认点击
  },
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    // 获取 发现更多 模块参数
    async getSearchMore() {
      const res = await queryIndustrialParks({
        needToken: true,
      });
      this.sortList3 = res.data;
      console.log(this.sortList3, "this.sortList3");
      this.sortList3.forEach((e) => {
        this.$set(e, "clickTrue", false); //判断点击状态的参数
      });
      this.leftPark(this.sortList3[0]); //默认点击第一个
    },
    // 顶部三个标签点击
    headClick(e) {
      this.headType = e;
    },
    // 选择当前位置
    distanceClick(item) {
      this.$set(this.condition, "condition1", item);
      //当前位置和发现更多只能选择一个 （初始化发现更多）
      this.$set(this.condition, "condition3", "");
      this.$set(this.condition, "condition4", "");
      // ==========================
      this.$router.push({
        path: "/searchCompany",
        name: "searchCompany",
        params: {
          condition: this.condition,
          swipeItem: this.swipeItem,
        },
      });
    },
    // 选择智能排序
    intelligenceClick(item) {
      this.$set(this.condition, "condition2", item);
      // ================
      this.$router.push({
        path: "/searchCompany",
        name: "searchCompany",
        params: {
          condition: this.condition,
          swipeItem: this.swipeItem,
        },
      });
    },
    // 点击发现更多 行政区域
    admClick(e, title, data) {
      //当前位置和发现更多只能选择一个（初始化当前位置选项）
      this.$set(this.condition, "condition1", "");
      this.$set(this.condition, "condition3", title);
      this.$set(this.condition, "condition4", "");
      this.$router.push({
        path: "/searchCompany",
        name: "searchCompany",
        params: {
          condition: this.condition,
          swipeItem: this.swipeItem,
        },
      });
    },
    // 点击发现更多 产业园区右侧
    parkClick(item) {
      //当前位置和发现更多只能选择一个（初始化当前位置选项）
      this.$set(this.condition, "condition1", "");
      this.$set(this.condition, "condition3", "");
      this.$set(this.condition, "condition4", item);
      this.$router.push({
        path: "/searchCompany",
        name: "searchCompany",
        params: {
          condition: this.condition,
          swipeItem: this.swipeItem,
        },
      });
    },
    // 点击发现更多 产业园区左侧
    leftPark(item) {
      console.log(item, "e");
      this.parkLisRightt = item.parks;
      this.sortList3.forEach((e) => {
        this.$set(e, "clickTrue", false);
      });
      item.clickTrue = true;
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f1f6f9;
  display: flex;
  flex-flow: column;
}
.title {
  padding: 10px;
  display: flex;
}
.title_left {
  width: 5px;
  height: 18px;
  background-color: #3282e4;
}
.title_right {
  font-weight: bold;
  margin-left: 5px;
  font-size: 16px;
  line-height: 20px;
}
.filterCriteria_type_box {
  width: 100%;
  height: 45px;
  background-color: white;
  border-radius: 15px 15px 0 0;
  display: -webkit-box;
  padding: 10px;
  overflow-x: auto;
}
.filterCriteria_type {
  color: #6a6a6a;
  background-color: #f3f3f3;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 10px;
  padding: 0 10px;
  display: flex;
}
.filterCriteria_type_true {
  background-color: #e4efff !important;
  color: #3282e4 !important;
}
.filterCriteria_type_icon {
  img {
    width: 10px;
  }
}
.type2 {
  margin-left: 8px;
}
.more_icon {
  img {
    width: 10px;
    height: 10px;
    margin-right: 3px;
  }
}
.discover_more {
  background-color: white;
  margin-top: 3px;
  flex: 1;
  width: 100%;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}
.xzqy_title {
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
}
.xzqy_title2 {
  padding: 0 10px 5px 10px;
  font-size: 14px;
  font-weight: bold;
}
.xzqy_box {
  padding: 0 10px;
}
::v-deep .van-tab {
  border-radius: 20px;
  height: 24px;
  padding: 0 10px;
  margin-right: 10px;
  background-color: #f3f3f3;
  color: #6a6a6a;
  font-size: 13.33px;
}
::v-deep .van-tab--active {
  background-color: #e4efff;
  color: #3282e4;
  border: 0;
}
::v-deep .van-tabs__nav--line {
  padding-bottom: 0;
}
::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
  padding-left: 0 !important;
}
::v-deep .van-tabs--line {
  height: 33px;
}
::v-deep .van-tabs__wrap {
  height: 33px;
}
::v-deep .van-tabs__line {
  display: none;
}
.parkList {
  flex: 1 !important;
  width: 100%;
  background-color: #f3f3f3;
  display: flex;
  overflow: hidden;
  // height: calc(100%-500px);
}
.parkList_right {
  width: 264px;
  height: 100%;
  overflow: auto;
  background-color: #f3f3f3;
}
.parkList_left {
  flex: 1;
  height: 100%;
  background-color: #f7f7f7;
}
.parkList_left_div {
  width: 100%;
  // height: 42px;
  // line-height: 42px;
  padding-left: 15px;
  font-size: 14px;
  border-left: 2.5px #f7f7f7 solid;
  margin-top: 20px;
}
.parkList_left_div1 {
  color: #158dec;
}
.leftPark1 {
  border-left: 2.5px #3282e4 solid;
  color: #158dec;
}
.distance {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  font-size: 14px;
  border-bottom: 1px solid #ececec;
}
.blue_text {
  color: #3282e4;
}
</style>
